<template>
    <div class="searchPopupContainer-dailog  app-container">
        <el-row :gutter="0">
            <el-col :xs='22' :sm="22" :md="18" :lg="18" :xl="18">
                <div class="searchPopupContainer-dailog-containers ">

                    <div class="searchPopupContainer-dailog-content contentBoxs_form" style="margin:0px!important">


                        <div class="contentBoxs_form_box rowDiv">
                            <!-- <div class="photoRegisterDailog_title" style="display: flex;justify-content:flex-end;">
                                <i class="el-icon-close photoRegisterClose" @click="closeEvent"></i>

                            </div> -->
                            <div class="formContainers">
                                <el-form :model="queryParams" ref="queryParamsForm" label-width="68px"
                                    class="formBox formBox1" size="small" :inline="true">
                                    <el-form-item label="病例编号" prop="pathologyId">
                                        <el-input v-model="queryParams.pathologyId" placeholder="病例编号" style="width:200px;">
                                        </el-input>
                                    </el-form-item>

                                    <el-form-item label="上传时间">
                                        <el-date-picker style="width:200px;" v-model="createdRange"
                                            value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                            start-placeholder="开始日期" end-placeholder="结束日期">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="所属医院">
                                        <el-select v-model="queryParams.sliceHospital" style="width:200px;">
                                            <el-option v-for="t in hospitalList" :key="t.id" :label="t.name" :value="t.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="标本类别">
                                        <el-select v-model="queryParams.specimenType" placeholder="请选择标本类别" clearable
                                            style="width:200px;">
                                            <el-option v-for="item in specimenCategoryList" :key="item.id"
                                                :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="切片类别">
                                        <el-select v-model="queryParams.sliceCategory" placeholder="请选择切片类别" clearable
                                            style="width:200px;">
                                            <el-option v-for="item in sliceCategoryList" :key="item.id" :label="item.name"
                                                :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="冰冻">
                                        <el-select v-model="queryParams.freezeType" placeholder="请选择是否冰冻" clearable
                                            style="width:200px;">
                                            <el-option v-for="item in freezeTypeList" :key="item.id" :label="item.name"
                                                :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="切片用途">
                                        <el-select v-model="queryParams.slicePurpose" placeholder="请选择切片用途" clearable
                                            style="width:200px;">
                                            <el-option v-for="item in sliceUsesList" :key="item.id" :label="item.name"
                                                :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="取材脏器">
                                        <el-select v-model="queryParams.sampleOrganId" placeholder="请选择取材脏器" clearable
                                            style="width:200px;">
                                            <el-option v-for="(
                                            organ, index
                                        ) in sampleOrganList" :key="index" :label="organ.name"
                                                :value="organ.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="扫描批次">
                                        <el-input v-model="queryParams.biopsyHistoryId" placeholder="请输入扫描批次"
                                            style="width:200px;"></el-input>
                                    </el-form-item>
                                    <el-form-item label="是否肿瘤">
                                        <el-select v-model="queryParams.sliceIsTumor" placeholder="请选择是否肿瘤" clearable
                                            style="width:200px;">
                                            <el-option v-for="(data, index) in isneoplasmList" :key="index"
                                                :label="data.name" :value="data.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="肿瘤分类">
                                        <el-select v-model="queryParams.sliceTumorCategory" placeholder="请选择肿瘤分类" clearable
                                            style="width:200px;">
                                            <el-option v-for="(data, index) in neoplasmkindList" :key="index"
                                                :label="data.name" :value="data.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="肿瘤分级">
                                        <el-select v-model="queryParams.sliceTumorStaging" placeholder="请选择肿瘤分级" clearable
                                            style="width:200px;">
                                            <el-option v-for="(data, index) in neoplasmStagingList" :key="index"
                                                :label="data.name" :value="data.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="分期T">
                                        <el-select v-model="queryParams.sliceTumorStagingT" placeholder="请选择" clearable
                                            style="width:200px;">
                                            <el-option v-for="(data, index) in neoplasmStagingTList" :key="index"
                                                :label="data.name" :value="data.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="分期N">
                                        <el-select v-model="queryParams.sliceTumorStagingN" placeholder="请选择" clearable
                                            style="width:200px;">
                                            <el-option v-for="(data, index) in neoplasmStagingNList" :key="index"
                                                :label="data.name" :value="data.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="分期M">
                                        <el-select v-model="queryParams.sliceTumorStagingM" placeholder="请选择" clearable
                                            style="width:200px;">
                                            <el-option v-for="(data, index) in neoplasmStagingMList" :key="index"
                                                :label="data.name" :value="data.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="整理状态">
                                        <el-select v-model="queryParams.sliceTumorStagingT" placeholder="请选择" clearable
                                            style="width:200px;">
                                            <el-option v-for="(data, index) in neoplasmStagingTList" :key="index"
                                                :label="data.name" :value="data.id"></el-option>
                                        </el-select>
                                    </el-form-item>


                                </el-form>
                            </div>

                        </div>

                    </div>

                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

export default {
    name: 'searchPopup',
    components: {

    },
    props: {
        queryParams: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            // 所需字典对应表
            dictRequestMap: [
                {
                    code: 'sliceUses',
                    arrayKey: 'sliceUsesList',
                },
                {
                    code: 'freezeType',
                    arrayKey: 'freezeTypeList',
                },
                {
                    code: 'sliceCategory',
                    arrayKey: 'sliceCategoryList',
                },
                {
                    code: 'checkCategory',
                    arrayKey: 'checkCategoryList',
                },
                {
                    code: 'SexKind',
                    arrayKey: 'sexKindList',
                },
                {
                    code: 'specimenCategory',
                    arrayKey: 'specimenCategoryList',
                },
                {
                    code: 'neoplasmStaging',
                    arrayKey: 'neoplasmStagingList', //肿瘤分期
                },
                {
                    code: 'neoplasmkind',
                    arrayKey: 'neoplasmkindList', //肿瘤分类
                },
                {
                    code: 'neoplasmStagingT',
                    arrayKey: 'neoplasmStagingTList', //肿瘤分期T
                },
                {
                    code: 'neoplasmStagingN',
                    arrayKey: 'neoplasmStagingNList', //肿瘤分期N
                },
                {
                    code: 'neoplasmStagingM',
                    arrayKey: 'neoplasmStagingMList', //肿瘤分期M
                },
                {
                    code: 'hospitalList',
                    arrayKey: 'hospitalList', //各个医院列表
                },
            ],
            hospitalList: [],
            neoplasmStagingList: [],
            neoplasmkindList: [],
            neoplasmStagingTList: [],
            neoplasmStagingNList: [],
            neoplasmStagingMList: [],
            sliceUsesList: [],
            freezeTypeList: [],
            sliceCategoryList: [],
            checkCategoryList: [],
            sexKindList: [],
            specimenCategoryList: [],
            sampleOrganList: [], // 取材脏器列表
            createdRange: [],
            isneoplasmList: [
                {
                    id: 0,
                    name: '否',
                },
                {
                    id: 1,
                    name: '是',
                },
            ],
            sliceSortingStatusList: [
                {
                    id: 0,
                    name: '未整理',
                },
                {
                    id: 1,
                    name: '已整理',
                },
            ],
            isAnnotationsInformationList: [
                {
                    id: 0,
                    name: '未标注',
                },
                {
                    id: 1,
                    name: '已标注',
                },
            ],
        };
    },
    computed: {

        device() {
            return this.$store.state.device
        }
    },
    mounted() {
        // 获取字典数据
        this.dictionariesRequest();
    },
    methods: {
        // 请求字典信息
        dictionariesRequest() {
            this.dictRequestMap.forEach((map) => {
                this.$axios({
                    method: 'GET',
                    url: '/dicts/list',
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this[map.arrayKey] = _.clone(res.data.data);

                        if (map.code === 'SexKind') {
                            this[map.arrayKey].push({
                                id: '',
                                name: '全部',
                            });
                        }
                    }
                });
            });
        },
        closeEvent() {
            this.$emit('close')
        },
    },
};
</script>

<style scoped lang="scss">
.photoRegisterDailog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;

    .photoRegisterDailog_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

    }
}

.formContainers {
    max-height: 400px;
    overflow-y: auto;
}

.rowDiv {
    //border: 1px solid #3a62d7;
    box-shadow: 0px 2px 10px 0px rgba(58, 98, 215, 0.8)
}
</style>
